{% extends "0.框架.html" %}

{% block title %}个人信息 - 我的博客{% endblock %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/user_profile.css' %}">
{% endblock %}

{% block mate %}
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <!-- 用户头像区域 -->
            <div class="text-center mb-4">
                <div class="avatar-container">
                    {% if user.image %}
                        <img src="{{ user.image.url }}" alt="用户头像" class="img-thumbnail rounded-circle" id="avatar-preview">
                    {% else %}
                        <img src="{% static 'img/moban.png' %}" alt="默认头像" class="img-thumbnail rounded-circle" id="avatar-preview">
                    {% endif %}
                </div>
                <div class="mt-3">
                    <form id="avatar-form" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="file" name="image" id="avatar-upload" accept="image/*" class="d-none">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="document.getElementById('avatar-upload').click()">
                            更换头像
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-9">
            <h2 class="mb-4">个人信息</h2>
            
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" value="{{ user.username }}" readonly>
                    </div>
                    <div class="col-md-6">
                        <label for="email" class="form-label">电子邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" value="{{ user.email }}">
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="nickname" class="form-label">昵称</label>
                        <input type="text" class="form-control" id="nickname" name="nickname" value="{{ user.nickname|default_if_none:'' }}">
                    </div>
                    <div class="col-md-6">
                        <label for="age" class="form-label">年龄</label>
                        <input type="number" class="form-control" id="age" name="age" value="{{ user.age|default_if_none:'' }}">
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="birthday" class="form-label">生日</label>
                        <input type="date" class="form-control" id="birthday" name="birthday" 
                               value="{% if user.birthday %}{{ user.birthday|date:'Y-m-d' }}{% endif %}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">性别</label>
                        <div class="form-check">
                            {% for choice in gender_choices %}
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="gender" id="gender{{ choice.0 }}" 
                                       value="{{ choice.0 }}" {% if user.gender == choice.0 %}checked{% endif %}>
                                <label class="form-check-label" for="gender{{ choice.0 }}">{{ choice.1 }}</label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="submit" class="btn btn-primary">保存更改</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
document.getElementById('avatar-upload').addEventListener('change', function(e) {
    if (this.files && this.files[0]) {
        // 显示加载指示器
        var preview = document.getElementById('avatar-preview');
        preview.style.opacity = '0.5';

        var reader = new FileReader();

        reader.onload = function(e) {
            preview.src = e.target.result;
        }

        reader.readAsDataURL(this.files[0]);

        // 自动提交表单
        var form = document.getElementById('avatar-form');
        var formData = new FormData(form);

        fetch("{% url 'auth0:update_avatar' %}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log(data);
            if (data.success) {
                // 更新头像URL
                preview.src = data.avatar_url;
                preview.style.opacity = '1';
            } else {
                alert(data.message || '头像上传失败');
                // 恢复默认头像
                preview.src = "{% static 'img/moban.png' %}";
                preview.style.opacity = '1';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('头像上传失败');
            // 恢复默认头像
            preview.src = "{% static 'img/moban.png' %}";
            preview.style.opacity = '1';
        });
    }
});
</script>
{% endblock %}